<script setup>

import {ref} from "vue";
import {useStore} from "@/store";
import {showConfirmDialog} from "vant";

const store = useStore()
const value = ref('')
const recent = ref([...store.getRecent])
const promote = ref([])
const shakeX = ref(false)
const search = v => {
  if (v) store.setRecent(v)
  value.value=''
}
const deleteRecent = (option = {
  dialog:false, index: 'All',
  ...option
}) => {
  const Delete = ()=>{
    store.deleteRecent(option.index)
    recent.value = store.getRecent
  }
  if(option.dialog){
    shakeX.value=true
    showConfirmDialog({
      title: '提示',
      message: '确认删除最近搜索记录吗？',
    }).then(Delete).finally(()=>shakeX.value=false)
  }else { Delete() }
}
</script>

<template>
  <view class="search">
    <van-search
        v-model="value"
        :clearable="false"
        input-align="center"
        placeholder="请输入搜索内容"
        @search="search"
    />
    <view class="content">
      <view class="recent">
        <view class="header">
          <view class="title">最近搜索</view>
          <van-icon class="icon" name="delete-o" size="20" @click="deleteRecent({dialog: true})"/>
        </view>
        <view class="container">
          <view
              v-if="recent[0]"
              :class="['item','animate__animated', { 'animate__rubberBand': shakeX }]"
              v-for="(v,i) in recent"
              :key="i"
          >
            <view class="name">{{v}}</view>
            <van-icon @click="deleteRecent({index: i})" class="icon" name="cross" />
          </view>
          <view v-else style="font-size: 12px; color: #999">暂时没有搜索记录喔~</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: calc(100vh - 44px);

  .content {
    width: 100%;
    height: calc(100% - 54px);

    .recent {
      .header {
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-between;

        .title {
          display: inline;
          color: #aaaaaa;
        }

        .icon {
          line-height: 50px;
        }
      }
      .container{
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .item{
          display: inline-flex;
          align-items: center;
          padding: 7px;
          background: #ddd;
          border-radius: 7px;
          margin-right: 10px;
          margin-top: 10px;
          .name{
            font-size: 13px;
            font-weight: normal;
            color: #555;
          }
          .icon{ margin-left: 5px }
        }
      }
    }
  }
}
</style>